<template>
	<view class="mywallet">
		<!-- 顶部导航 -->
		<diyNavBar value='我的钱包' color='#FF6F30' textright='保证金' @goto="$util.redirectTo('/pages/bond/bond')"></diyNavBar>
		<view class="topbody">
			<view class="topbody-top">
				<text class="money">{{getData.money}}</text>
				<text class="title">余额</text>
			</view>
			<view class="topbody-bottom" >
				<view class="item">
					<text class="money">{{getData.jrmoney}}</text>
					<text class="title">今日收益</text>
				</view>
				<view class="item">
					<text class="money">{{getData.sxcount}}</text>
					<text class="title">刷新次数</text>
				</view>
				<view class="item">
					<text class="money">{{getData.ljmoney}}</text>
					<text class="title">累计收益</text>
				</view>
			</view>
		</view>
		<view class="withdrawal">
			<view class="left">
				<text class="title">可提现金额</text>
				<text class="money">{{getData.money}}</text>
			</view>
			<view class="right">
				<view class="button" 
				@click="tx">提现</view>
				<view class="button buttonhover"
				 @click="$util.redirectTo('/pages/recharge/recharge')">充值</view>
			</view>
		</view>
		<view class="list">
			<view class="toptype">
				<view class="type-item" v-for="(item,index) in typeList" :key="index"
				 :style="index == judgeIndex?'color:#FF6F30':''"
				 @click="select(index)">
					{{item}}
				</view>
			</view>
			<scroll-view scroll-top="0" scroll-y="true" class="scroll-Y" :show-scrollbar="false">
				<mescroll-body ref="mescrollRef" @down="downCallback" @up="upCallback"
				 :up = "upOption" :down="downOption">
					<view v-for="(item,index) in taskList" :key="index">
						<view class="listitem">
							<view class="left">
								<text class="text">{{item.name}}</text>
								<text class="time">{{item.create_time}}</text>
							</view>
							<text class="money">{{item.price}}</text>
						</view>
						<view class="bottom" v-if="item.reason">
							{{item.reason}}
						</view>
					</view>
				</mescroll-body>
			</scroll-view>
		</view>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	import diyNavBar from '../../component/diy-nav/diy-navbar.vue'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import loadingCover from '../../component/loading-cover/loading-cover.vue'
	export default{
		components:{diyNavBar,loadingCover},
		mixins: [MescrollMixin],
		data(){
			return {
				typeList:['收益明细','提现明细','充值明细'],
				judgeIndex:0,//选中的下标
				getData:{},//获取到的数据
				taskList:[],//展示的数据
				upOption:{
					page:{
						num:0,
						size:10
					},
					textNoMore:''
				},//上拉参数配置
				downOption:{
					page:{
						num:0,
						size:10
					}
				},//下拉参数配置
			}
		},
		onShow() {
			this.$http.sendrequest('/member/Mywallet',{},{
				tokenJudge:true
			}).then(res=>{
				if(res.code == 1){
					this.getData = res.data;
				}
			})
		},
		methods:{
			tx(){
				let data = uni.getStorageSync('member');
				console.log(data.member_level_list.zd_fee)
				if(data.member_level == 1){
					uni.showModal({
						content: `普通会员提现手续费${Number(data.member_level_list.tx_fee)}%`,
						success: (res) => {
							this.$util.redirectTo('/pages/withdrawal/withdrawal')
							uni.hideLoading();
						}
					});
				} else this.$util.redirectTo('/pages/withdrawal/withdrawal')
				
			},
			select(index){
				this.judgeIndex = index;
				this.taskList = [];
				this.mescroll.resetUpScroll()
			},
			// 下拉刷新
			downCallback(page){
				this.mescroll.resetUpScroll()
			},
			//上拉加载
			upCallback(page){
				this.$http.sendrequest('/member/DetailedStatus',{
					status:this.judgeIndex + 1
				}).then(res=>{
					if(res.code == 1){
						if(page.num == 1) this.taskList = []; //如果是第一页需手动制空列表
						this.taskList = this.taskList.concat(res.data);
						this.mescroll.endBySize(res.data.length, res.data.count);
						this.$refs.loadingCover.hide();
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.mywallet{
		min-height: 100vh;
		background: $uni-content-background-color;
		font-family: PingFangSC-regular;
		.topbody{
			height: 380rpx;
			background: $uni-tabbar-hovercolor;
			padding-top: 26rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;
			.topbody-top{
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #FFFFFF;
				font-weight: bold;
				.money{
					font-size:56rpx;
				}
				.title{
					font-size: 32rpx;
				}
			}
			.topbody-bottom{
				margin-top: 76rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;
				.item{
					display: flex;
					flex-direction: column;
					align-items: center;
					color: #FFFFFF;
					font-weight: bold;
					.money{
						font-size: 40rpx;
					}
					.title{
						font-size: 28rpx;
					}
				}
			}
		}
		.withdrawal{
			padding: 40rpx;
			margin:0 30rpx 30rpx;
			background: #FFFFFF;
			border-radius:24rpx ;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;
			.left{
				display: flex;
				flex-direction: column;
				font-weight: bold;
				.title{
					font-size: 28rpx;
				}
				.money{
					font-size: 40rpx;
					margin-top: 26rpx;
				}
			}
			.right{
				display: flex;
				align-items: center;
				color: #FF6F30 ;
				font-size: 24rpx ;
				.button{
					border: 2rpx solid #FF6F30;
					border-radius: 52rpx;
					height: 52rpx;
					width: 120rpx;
					text-align: center;
					line-height: 52rpx;
				}
				.buttonhover{
					background: #FF6F30;
					color: #FFFFFF;
					margin-left: 28rpx;
				}
			}
		}
		.list{
			margin: 0 30rpx;
			border-radius: 24rpx;
			background: #FFFFFF;
			padding-top: 10rpx ;
			box-sizing: border-box;
			height: 690rpx;
			.toptype{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.type-item{
					width: 230rpx;
					height: 88rpx;
					text-align: center;
					line-height: 88rpx;
					font-size: 26rpx;
				}
			}
			.scroll-Y{
				height: calc(100% - 90rpx);
				.listitem{
					padding:32rpx 44rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.left{
						display: flex;
						flex-direction: column;
						.text{
							font-size: 26rpx;
							margin-bottom: 20rpx;
						}
						.time{
							font-size: 24rpx;
							color: #999999;
						}
					}
					.money{
						font-size: 32rpx;
						color: #FF6F30;
					}
				}
				.bottom{
					background-color: rgba(0,0,0,.1);
					min-height: 140rpx;
					border-radius: 10rpx;
					padding: 20rpx;
					box-sizing: border-box;
					font-size: 24rpx;
					margin: 0 30rpx 0;
					color: #999999;
				}
			}
			
		}
	}
  /deep/ ::-webkit-scrollbar {
			width: 0;
		  }
	/deep/ .mescroll-body{
		min-height: 540rpx;
	}
</style>
